<template>
    <component
        :is="componentType"
        :data="data"
        :position="position"
        :layer="layer + 1"
        ref="compRef"
        :index="index"
        @toggle-expand="toggleExpand"
        @update-position="updatePosition"
    />
</template>

<script setup>
import Block from './Block.vue';
import Layer from './Layer.vue';
import { computed, getCurrentInstance, onMounted, watch } from 'vue';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['updatePosition']);

const props = defineProps({
    data: Object,
    position: {
        type: Object,
        required: true
    },
    layer: {
        type: Number,
        required: true
    },
    index: {
        type: Number,
        required: true
    }
});

const componentType = computed(() => {
    return props.data.block_name ? Block : Layer;
});

function getBlockRect() {
    return proxy.$refs.compRef.getBlockRect();
}

function toggleExpand() {
    if (props.data.block_name) {
        // console.log(`## Entry.vue ${props.data.block_name} index = `, props.index);
        emit('updatePosition', props.index);
    }
}

function updatePosition() {
    if (props.data.block_name) {
        emit('updatePosition', props.index);
    }
}

onMounted(() => {});

defineExpose({ getBlockRect });
</script>

<style scoped></style>
